<!--类型页-->
<script setup>


import {onMounted, ref} from "vue";
import {Toast} from "tdesign-mobile-vue";
import {get} from "../util/Request.js";
import router from "../router/index.js";


const currentValue = ref('1');
const list=ref([{}])

let type;

onMounted(()=> {
  get("tbType/type").then(r => {
    if (r.code == 0) {
      list.value=r.data
    } else {
      Toast(r.data)
    }
  })
})





const images=ref([])
const onChange = (value) => {
  currentValue.value = value;
  get("tbType/findBookType?typeId="+value).then(r => {
    if (r.code == 0) {
      images.value = r.data

    } else {
      Toast(r.data)
    }
  })
};

const jianjie=(r)=>{
  localStorage.setItem("bookName",r)
  router.push("/aiw")
}


</script>

<template>
  <div style="font-size: 20px;"><h3>类别</h3></div>
  <div class="demo-tab-bar">
    <t-tabs v-if="list.length>0" :value="currentValue" :list="list" :space-evenly="false" @change="onChange" />
  </div>
  <div>
    <div class="image-demo" style="padding: 0 8px;margin-top: 3%;width:95%;height:100%;flex-wrap: wrap;display: flex">
      <div v-for="image in images" @click="jianjie(image.bookName)" style="width: 108px; height: 210px; margin-left: 1.2%;">
        <t-image :src="image.bookImg" class="image-container" style="width: 108px; height: 70%;" />
        <p class="image-demo-tip">{{ image.bookName }}</p >
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>